<extend name="./public/frame.html"/>
<block name="content">
    <style type="text/css">
        .layer-inline {
            float: left;
            margin-left: 10px;
        }
    </style>
    <div class="layer-inline">
        <label>订单类型：</label>
        <div class="layui-inline" style="width: 150px;">
            <?php if($admin_info['admin_type'] == 1) {?>
            <select id="all_order" name="all_order" class="layui-input">
                <option value="">全部订单</option>
                <option value="1">普通订单</option>
                <option value="2">测试订单</option>
            </select>
            <?php } ?>
        </div>
    </div>
    <div class="layer-inline">
        <label>订单号：</label>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" lay-verify placeholder="请输入订单号" autocomplete="off" class="layui-input" id="order_sn">
            </div>
        </div>
    </div>
    <div class="layer-inline">
        <label>时间类型：</label>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select lay-verify id="type" class="layui-input" style="width: 150px;">
                    <option value="">请选择类型</option>
                    <option value="1">下单时间</option>
                    <option value="2">支付时间</option>
                </select>
            </div>
        </div>

        <label>开始时间：</label>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" class="layui-input date" id="start" autocomplete="off" placeholder="开始时间">
            </div>
        </div>
        <label>结束时间：</label>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" class="layui-input date" id="end" autocomplete="off" placeholder="结束时间">
            </div>
        </div>
    </div>
    <div class="layui-inline">
        <label>司机姓名：</label>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入司机姓名" autocomplete="off" class="layui-input" id="driver_name">
            </div>
        </div>
    </div>
    <div class="layui-inline">
        <label>乘客手机号：</label>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入乘客手机号" autocomplete="off" class="layui-input" id="user_phone" maxlength="11">
            </div>
        </div>
    </div>
    <div class="layui-inline">
        <label>所属车队：</label>
        <div class="layui-inline" style="width: 150px;">
            <select lay-search="" id="fleet_id" class="layui-input">
                <option value="">所有车队</option>
                <volist name="fleet_list" id="vo">
                    <option value="{$vo['id']}">{$vo['name']}</option>
                </volist>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label>订单状态：</label>
        <div class="layui-inline" style="width: 150px;">
            <select lay-verify lay-search="" id="order_status" class="layui-input">
                <option value="">所有状态</option>
                <volist name="order_status" id="vo">
                    <option value="{$key}">{$vo}</option>
                </volist>
            </select>
        </div>
    </div>
    <div class="layui-inline" style="margin-left: 50px;">
        <button class="layui-btn" data-type="search">搜索</button>
        <button class="layui-btn layui-btn-disabled" data-type="" id="reset">复位</button>
        <button class="layui-btn" data-type="excel">导出</button>
    </div>

    <div class="layui-inline" style="margin-left: 50px;">
    <!--<form class="layui-form">-->
        <!--<label>App显示：</label>-->
        <!--<div class="layui-inline">-->
            <!--<div class="layui-form-item">-->
                    <!--<input type="checkbox" name="status" value="{$status}" lay-skin="switch" lay-filter="status" lay-text="开启|关闭" <if condition="$status eq 1">checked</if>>-->
            <!--</div>-->
        <!--</div>-->
    <!--</form>-->
    </div>
    * <span style="color: red">司机姓名为红色 - 测试司机 / 订单号为红色 - 测试订单</span>
        <!--</div>-->

	<table class="layui-table" lay-filter="order" id="order"></table>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="detail">详细</a>
		<!--<a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>-->
	</script>
    <script type="text/html" id="orderTpl">
        {{#if(d.driver_type == 1) { }}
        <span style="color: red">{{d.order_sn}}</span>
        {{# } else { }}
        {{d.order_sn}}
        {{#}}}
    </script>
    <script type="text/html" id="driverTpl">
        {{#if(d.driver_type == 1) { }}
        <span style="color: red">{{d.driver_name}}</span>
        {{# } else { }}
        {{d.driver_name}}
        {{#}}}
    </script>

    <!--<script type="text/html" id="driverPhoneTpl">-->
        <!--{{#if(d.driver_type == 1) { }}-->
        <!--<span style="color: red">{{d.driver_phone}}</span>-->
        <!--{{# } else { }}-->
        <!--{{d.driver_name}}-->
        <!--{{#}}}-->
    <!--</script>-->
	<script type="application/javascript">
		layui.use(['table', 'laytpl', 'laydate','form'], function () {
			var table = layui.table
				, form = layui.form
				, laydate = layui.laydate;

			lay('.date').each(function(){
				laydate.render({
					elem: this
					,type: 'date'
					,trigger: 'click'
				});
			});
			var tableIns = table.render({
				elem:"#order",
				url:"/admin/interOrder/down_index",
				cols: [[
//					{checkbox:true,title:"",fixed: true},
					{field:'down_id',title:"ID", width:80,sort: true,align:'center'},
					{field:'order_sn',title:"订单号", width:190,sort: true,align:'center',templet:'#orderTpl'},
					{field:'start_name',title:"出发地", width:120,align:'center'},
                    {field:'arrive_name',title:"目的地", width:120,align:'center'},
                    {field:'is_contract',title:"是否包车", width:120,align:'center'},
                    {field:'passenger_number',title:"乘客数", width:120,align:'center'},
                    {field:'passenger_phone',title:"乘客手机号", width:120,align:'center'},
                    {field:'money',title:"车费(元)", width:120,align:'center'},
                    {field:'add_time',title:"下单时间", width:180,align:'center'},
                    {field:'pay_time',title:"支付时间", width:180,align:'center'},
					{field:'driver_name',title:"司机姓名", width:120,align:'center',templet:'#driverTpl'},
//                    {field:'driver_phone',title:"司机手机号", width:120,align:'center',templet:'#driverPhoneTpl'},
					{field:'car_plate',title:"车牌号", width:120,align:'center'},
                    {field:'fleet_name',title:"所属车队", width:120,align:'center'},
                    {field:'order_status',title:"订单状态", width:120,fixed:'right',align:'center'},
					{title:"操作",toolbar: '#barDemo',width:180,fixed:'right',align:'center'}
				]],
				page:true,
				limit:10,
				done: function(res, curr, count){
					_cur_page =curr;
					_cur_limit =res['limit'];
				}
			});


//			//监听 开启/关闭 操作
//			form.on('switch(status)',function(obj){
//			    var check = obj.elem;
//			    var ori = obj.elem.checked == true ? false : true;
//			    if(ori) {
//                    var value = 0;
//                } else {
//			        var value = 1;
//                }
//
//			    var tip = ori === true ? '确定关闭么？' : '确定开启么？';
//			    layer.confirm(tip, {icon:3, title:'提示'},function(index) {
//			        var url = "{:url('down_cancel')}";
//			        var div = obj.othis.parent('div');
//			        $.post(url, {'status':value},function(res) {
//			            switch (res['status']) {
//                            case 1 :
//                                var value = value == 1?0:1;
//                                layer.msg(res['msg'],{icon: 6,time: 1000});
//                                $(check).prop('checked',obj.elem.checked).val(val);
//                                form.render('checkbox');
//                                break;
//                            default:
//                                layer.alert(res['msg'],{icon: 5});
//                                $(check).prop('checked', ori);
//                                form.render();
//                                break;
//                        }
//                    }, 'json');
//			        layer.close(index);
//                },function(index){
//			        $(check).prop('checked', ori);
//			        form.render();
//			        layer.close(index);
//				});
//            });

			//监听工具条
			table.on('tool(order)', function (obj) {
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象
				var id = data.down_id;
				var status = data.status;
				if (layEvent === 'detail') {
					layer.open({
						type: 2,
						title: '订单'+data.order_sn+'的信息',
						shadeClose: true,
						shade: 0.8,
						area: ['100%', '100%'],
						content: '{:url("/admin/inter_order/down_detail","down_id=")}' + id, //iframe的url
						cancel: function (index, layero) {
							tableIns.reload("{$url}");
						}
					});
				}
			});

			var $ = layui.jquery, active = {
				search: function () {
					var	all_order = $('#all_order').val(),
                        order_sn = $.trim($('#order_sn').val()),
                        type = $('#type').val(),
                        start = $('#start').val(),
						end = $('#end').val(),
                        driver_name = $.trim($('#driver_name').val()),
                        user_phone = $.trim($('#user_phone').val()),
                        fleet_id = $('#fleet_id').val(),
                        order_status = $('#order_status').val();

                    if((start !== '' || end !== '') ) {
                        if(start && end) {
                            if(type === '') {
                                layer.msg('时间类型不能为空', {icon: 5});
                                return false
                            }
                            if (start > end) {
                                layer.msg('开始时间不能大于结束时间', {icon: 5});
                                return false
                            }
                        } else {
                            layer.msg('开始和结束时间不能为空', {icon: 5});
                            return false
                        }
                    }

					var	reset = $('#reset');
					if(all_order||order_sn||type||start||end||driver_name||user_phone||fleet_id||order_status){
						reset.removeClass('layui-btn-disabled').addClass('layui-btn-normal').data('type', 'reset');
						tableIns.reload({
							url: '/admin/inter_order/down_index',
							where: {
                                all_order : all_order,
                                order_sn : order_sn,
                                type : type,
								start : start,
								end : end,
                                driver_name : driver_name,
                                user_phone : user_phone,
								fleet_id : fleet_id,
								order_status : order_status
							} //设定异步数据接口的额外参数
						});
					} else {
                        reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                        layer.alert('搜索项不能为空');
                    }
				}
                , reset: function () {
                    var reset = $('#reset');
                    if (reset.data('type') !== '') {
                        tableIns.reload({
                            url: '/admin/inter_order/down_index', where: {}
                        });
                    }
                    $('.layui-input').each(function () {
                        $(this).val('');
                    });
                    $('.layui-this').each(function () {
                        $(this).removeClass('layui-this');
                    });
                    reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                }
				 , excel: function () {
                    var	all_order = $('#all_order').val(),
                        order_sn = $.trim($('#order_sn').val()),
                        type = $('#type').val(),
                        start = $('#start').val(),
                        end = $('#end').val(),
                        driver_name = $.trim($('#driver_name').val()),
                        user_phone = $.trim($('#user_phone').val()),
                        fleet_id = $('#fleet_id').val(),
                        order_status = $('#order_status').val();
				 	var str = "&all_order="+ all_order + "&order_sn=" + order_sn + "&type=" + type + "&start=" + start + "&end=" + end + "&driver_name=" + driver_name+ "&user_phone=" + user_phone + "&fleet_id=" + fleet_id + "&order_status=" + order_status;
				 	layer.confirm('请选择导出内容:', {
				 		btn: ['全部数据', '取消'] //可以无限个按钮
				 		, btn3: function (index, layero) {
				 			layer.close(index);
				 		}
				 	}, function (index, layero) {
				 		//按钮【按钮一】的回调
				 		location = "{:url('down_excel','all=1')}"+str ;
				 		layer.close(index);
				 	}
//				 	, function (index) {
//				 		location = "{:url('excel','all=2')}" + str+"&page="+_cur_page+"&limit="+_cur_limit;
//				 		layer.close(index);
//				 	}
				 	);
				 }
			};
			$('.layui-btn').on('click', function () {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
	</script>
</block>
